<!DOCTYPE html>
<!-- html -->
<html>
<!-- head -->

<head>
    <title>会员风采</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- bootstrap-CSS -->
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Fontawesome-CSS -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
    <!-- Custom Theme files -->
    <link href="css/menu.css" rel="stylesheet" type="text/css" media="all" />
    <!-- menu style -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
    <!--meta data-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <meta name="keywords" content="Match Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
    <script type="application/x-javascript">
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

    function hideURLbar() { window.scrollTo(0, 1); }
    </script>
    <!--//meta data-->
    <!-- nav smooth scroll -->
    <script>
    $(document).ready(function() {
        $(".dropdown").hover(
            function() {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function() {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
    </script>
    <!-- //nav smooth scroll -->
    <!-- Calendar -->
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <script src="js/jquery-ui.js"></script>
    <script>
    $(function() {
        $("#datepicker").datepicker();
    });
    </script>
    <!-- //Calendar -->
    <link rel="stylesheet" href="css/intlTelInput.css">
</head>
<!-- //head -->
<!-- body -->

<body>
    <div style="position: relative;">
        <img style="width: 100%;" src="./images/ban2.png">
        <img style="position: absolute;width: 30%;top: 10px;left: 10px;" src="./images/logo.png">
    </div>
    <!-- header -->
    <!-- //Find your soulmate -->
    <!-- featured profiles -->
    <div class="w3layouts_featured-profiles">
        <div class="container">
            <!-- slider -->
            <div class="agile_featured-profiles">
            </div>
        </div>
        <!-- //slider -->
    </div>
    <script type="text/javascript" src="js/jquery.flexisel.js"></script>
    <!-- flexisel-js -->
    <script type="text/javascript">
    // $("#flexiselDemo3").flexisel({
    //          visibleItems: 1,
    //          animationSpeed: 1000,
    //          autoPlay: false,
    //          autoPlaySpeed: 5000,
    //          pauseOnHover: true,
    //          enableResponsiveBreakpoints: true,
    //          responsiveBreakpoints: {
    //              portrait: {
    //                  changePoint: 480,
    //                  visibleItems: 1
    //              },
    //              landscape: {
    //                  changePoint: 640,
    //                  visibleItems: 1
    //              },
    //              tablet: {
    //                  changePoint: 768,
    //                  visibleItems: 1
    //              }
    //          }
    //      });
    </script>
    <!-- //featured profiles -->
    <!-- //footer -->
    <!-- menu js aim -->
    <script src="js/jquery.menu-aim.js">
    </script>
    <script src="js/main.js"></script>
    <!-- Resource jQuery -->
    <!-- //menu js aim -->
    <!-- for bootstrap working -->
    <script src="js/bootstrap.js"></script>
    <!-- //for bootstrap working -->
    <script type="text/javascript">
    $(document).ready(function() {
        /*
            var defaults = {
                containerID: 'toTop', // fading element id
                containerHoverID: 'toTopHover', // fading element hover id
                scrollSpeed: 1200,
                easingType: 'linear' 
            };
            */

        $().UItoTop({ easingType: 'easeOutQuart' });

    });
    </script>
    <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    <!-- for smooth scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".scroll").click(function(event) {
            event.preventDefault();
            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
        });
    });
    </script>
    <script type="text/javascript">
    function getUrlValue() {
        var res = location.search.toLowerCase();

        var qs = (res.length > 0 ? res.substring(1) : ""),

            args = {},

            items = qs.length ? qs.split("&") : [],

            item = null,

            name = null,

            value = null,

            i = 0,

            len = items.length;

        for (i = 0; i < len; i++) {

            item = items[i].split("=");

            name = decodeURIComponent(item[0]);

            value = decodeURIComponent(item[1]);

            if (name.length) {

                args[name] = value;

            }

        }
        return args;

    };
    var args = getUrlValue();








    $(function() {
        $.ajax({
            method: "get",
            url: "/member/getAllMember",
            success: function(res) {
                console.log(res);
                var result = [];
                for (var i = 0, len = res.data.length; i < len; i += 4) {
                    result.push(res.data.slice(i, i + 4));
                }
                console.log(result)
                var htmlString = '<ul id="flexiselDemo3">';
                for (var i = 0; i < result.length; i++) {
                    htmlString += "<li style='list-style:none;'>";
                    for (var j = 0; j < result[i].length; j++) {
                        htmlString += '<div class="col-md-3 biseller-column">';
                        htmlString += '<a href="groom_profile.html?id=' + result[i][j].id + '">';
                        htmlString += '<div class="profile-image">';
                        htmlString += '<img src=' + filterImage(result[i][j].mem_img) + ' class="img-responsive" alt="profile image">';
                        htmlString += '<div class="agile-overlay">';
                        htmlString += '<h4>ID:' + result[i][j].mem_id + '</h4>';
                        htmlString += '<ul>';
                        htmlString += '<li><span>' + result[i][j].nickname + '</span></li>';
                        htmlString += '<li><span>1990.09</span></li>';
                        htmlString += '<li><span>' + filter(result[i][j].height) + ' / ' + filter(result[i][j].body_weight) + 'kg</span></li>';
                        htmlString += '<li><span>' + filter(result[i][j].occupation) + '</span></li>';
                        htmlString += '<li><span>' + filter(result[i][j].residence) + '</span></li>';
                        htmlString += '<li><span>' + filter(result[i][j].character_love) + '</span></li>';
                        htmlString += '</ul>';
                        htmlString += '</div>';
                        htmlString += '</div>';
                        htmlString += '</a>'
                        htmlString += '</div>';

                    }

                    htmlString += "</li>"
                }
                htmlString += "</ul>";

                $(".agile_featured-profiles").empty().append(htmlString);
                $("#flexiselDemo3").flexisel({
                    visibleItems: 1,
                    animationSpeed: 1000,
                    autoPlay: false,
                    autoPlaySpeed: 5000,
                    pauseOnHover: true,
                    enableResponsiveBreakpoints: true,
                    responsiveBreakpoints: {
                        portrait: {
                            changePoint: 480,
                            visibleItems: 1
                        },
                        landscape: {
                            changePoint: 640,
                            visibleItems: 1
                        },
                        tablet: {
                            changePoint: 768,
                            visibleItems: 1
                        }
                    }
                });
            },
            error: function(error) {
                console.log(error)
            }
        })


    })

    function filter(msg) {
        if (msg) {
            return msg;
        } else {
            return "暂无";
        }
    }

    function filterImage(msg) {
        if (msg) {
            return msg;
        } else {
            return './images/p6.jpg';
        }
    }
    </script>
</body>
<!-- //body -->

</html>
<!-- //html -->